<template>
<div class="content">
  <div class="touch-total-content">
    <div class="common-head">
      <div class="common-sub-title">
        <img src="~assets/img/icon_date.png" alt="培育统计">
        <span @click="openPicker()" ref = "dates" v-text="selectYear+'年'"></span>
        <!-- <mt-datetime-picker
          ref="picker"
          type="date"
          v-model="pickerValue"
          @confirm="handleConfirm">
        </mt-datetime-picker> -->
        <mt-datetime-picker
          ref="picker"
          v-model="pickerValue"
          type="date"
          year-format="{value} 年"
          month-format="{value} 月"
          date-format="{value} 日"
          @confirm="handleConfirm">
        </mt-datetime-picker>
      </div>
    </div>
    <div class="common-total-title">
      <div class="title-left">累计左区销售额：<span v-text="lzone_year_sale">20元</span></div>
      <div class="title-right">累计右区销售额：<span v-text="rzone_year_sale">999元</span> </div>
    </div>
    <div class="common-total-list">
      <div class="list-title tc">
          <span>月份</span>
          <span>左区销售额</span>
          <span>右区销售额</span>
          <span>操作</span>
      </div>
      <div class="common-list-item tc">
        <ul>
          <li v-for="(item,index) in month_sales" :key="index" :month="item.month">
            <span v-text="item.month"></span>
            <span v-text="item.lzone_month_sale">银卡</span>
            <span v-text="item.rzone_month_sale">1000</span>
            <router-link :to="{name: 'touch_detail', params: {month: item.month}}" tag="span">查看更多</router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import axios from 'axios'
import { apiPost } from 'src/common/api.js'
export default {
  data () {
    return {
      lzone_year_sale: 0,
      rzone_year_sale: 0,
      pickerValue: null,
      selectYear: null,
      month_sales: [
        {
          month: 1,
          lzone_month_sale: 0,
          rzone_month_sale: 0
        },
        {
          month: 2,
          lzone_month_sale: 0,
          rzone_month_sale: 0
        },
        {
          month: 3,
          lzone_month_sale: 0,
          rzone_month_sale: 0
        },
        {
          month: 4,
          lzone_month_sale: 0,
          rzone_month_sale: 0
        },
        {
          month: 5,
          lzone_month_sale: 0,
          rzone_month_sale: 0
        },
        {
          month: 6,
          lzone_month_sale: 0,
          rzone_month_sale: 0
        },
        {
          month: 7,
          lzone_month_sale: 0,
          rzone_month_sale: 0
        },
        {
          month: 8,
          lzone_month_sale: 0,
          rzone_month_sale: 0
        },
        {
          month: 9,
          lzone_month_sale: 0,
          rzone_month_sale: 0
        },
        {
          month: 10,
          lzone_month_sale: 0,
          rzone_month_sale: 0
        },
        {
          month: 11,
          lzone_month_sale: 0,
          rzone_month_sale: 0
        },
        {
          month: 12,
          lzone_month_sale: 0,
          rzone_month_sale: 0
        }
      ]
    }
  },
  mounted () {
    let curDate = new Date()
    let selectYear = curDate.getFullYear()
    this.selectYear = selectYear
    this.$cookie.set('selectYear', selectYear)
    this.getInfo(this.selectYear)
    setTimeout(() => {
      var sss = document.getElementsByClassName('picker-slot')
      Array.from(sss)[1].style.display = 'none'
      Array.from(sss)[2].style.display = 'none'
    }, 300)
  },
  methods: {
    openPicker () {
      this.$refs.picker.open()
    },
    handleConfirm () {
      this.selectYear = this.pickerValue.getFullYear()
      this.$refs.dates.innerHTML = this.selectYear + '年'
      this.getInfo(this.selectYear)
      this.$cookie.set('selectYear', this.selectYear)
    },
    // 获取量碰信息
    getInfo (selectYear) {
      apiPost('amount_total',
        {
          year: selectYear
        }).then((res) => {
        if (res.status === 0) {
          let data = res.data
          // console.log(data)
          this.lzone_year_sale = data.lzone_year_sale + '元'
          this.rzone_year_sale = data.rzone_year_sale + '元'
          this.month_sales = data.month_sales
        } else {
          console.log(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>
  @import '~lib/reset.scss';
  .touch-total-content {
    .common-head {
        background-color: #fff;
      .common-sub-title {
        padding:18px 16px;
      }
    }
    .common-total-title {
      display: flex;
      padding: 16px;
      background-color: #fff;
      justify-content: space-between;
      border-bottom: 1px solid #e5e5e5;
      font-size: $font-15;
      span {
        color: $color-font-two;
      }
      .title-left,.title-right {
        flex: 1;
      }
      .title-left {
        border-right: 1px solid #e5e5e5;
      }
      .title-right {
        text-align: right;
      }
    }
  }
</style>
